<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>treeGrid</title>
    <script type="text/javascript" src="lib/html5shiv.js"></script>
    <script type="text/javascript" src="lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css" />
    <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin" />
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css" />
        <link rel="stylesheet" href="design/css/layui.css">
        <script src="design/layui.js"></script>
    <script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
</head>
    <style>
        html, body {
            height: 100%;
            margin:0;padding:0;
            font-size: 12px;
        }
        div{
            -moz-box-sizing: border-box;  /*Firefox3.5+*/
            -webkit-box-sizing: border-box; /*Safari3.2+*/
            -o-box-sizing: border-box; /*Opera9.6*/
            -ms-box-sizing: border-box; /*IE8*/
            box-sizing: border-box; /*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
        }
        .dHead {
            height:85px;
            width:100%;
            position: fixed;
            z-index:5;
            top:0;
            overflow-x: auto;
            padding: 10px;
        }
        .dBody {
            width:100%;
            overflow:auto;
            top:90px;
            position:absolute;
            z-index:10;
            bottom:5px;
        }
        .layui-btn-xstree {
            height: 35px;
            line-height: 35px;
            padding: 0px 5px;
            font-size: 12px;
        }
    </style>
    <body>
    <div style="height: 40%;width: 1701px" >
        <div class="dHead">
            <a class="layui-btn layui-btn-primary layui-btn-xs layui-btn-xstree"  onclick="jigou_add('添加机构','shenjijigou-add','770','300',0)">添加</a>
            <!--<a class="layui-btn layui-btn-primary layui-btn-xs layui-btn-xstree"  onclick="radioStatus();">获取单选数据</a>-->
            <a class="layui-btn layui-btn-primary layui-btn-xs layui-btn-xstree"  onclick="openAll();">展开/折叠</a>
            <a class="layui-btn layui-btn-primary layui-btn-xs layui-btn-xstree"  onclick="reload()">刷新</a>
            <br>
            <br>
        </div>
        <div class="dBody">
            <table class="layui-hidden" id="treeTable" lay-filter="treeTable"></table>
        </div>


    </div>
    <div class="mt-20" style="margin-top: 200px;margin-left: 10px" id="shenji">
        <table class="table table-border table-bordered table-bg table-hover table-sort">
            <thead>
            <tr>
                <th scope="col" colspan="3">管辖被审计机构</th>
            </tr>
            <tr class="text-c">
                <th width="300">名称</th>
                <th width="300">代码</th>
            </tr>
            </thead>
            <tbody>
            <tr class="text-c va-m" v-for="dept in depts">
                <td>{{dept.name}}</td>
                <td>{{dept.code}}</td>
            </tr>
            </tbody>
        </table>
    </div>
    <script src="js/vue-2.4.0.js"></script>
    <script src="js/vue-resource-1.3.4.js"></script>
    <!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/My97DatePicker/4.8/WdatePicker.js"></script>
<!-- <script type="text/javascript" src="lib/datatables/1.10.0/jquery.dataTables.min.js"></script> -->
<script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>
<script>
    var v = new Vue({
        el:"#shenji",
        data:{
            depts:[]
        }
    });


    var editObj=null,ptable=null,treeGrid=null,tableId='treeTable',layer=null;
    layui.config({
        base: 'design/extend/'
    }).extend({
        treeGrid:'treeGrid'
    }).use(['jquery','treeGrid','layer'], function(){
        var $=layui.jquery;
        treeGrid = layui.treeGrid;//很重要
        layer=layui.layer;
        ptable=treeGrid.render({
            id:tableId
            ,elem: '#'+tableId
            ,url:'/getData'
            ,cellMinWidth: 100
            ,idField:'id'//必須字段
            ,treeId:'id'//树形id字段名称
            ,treeUpId:'parent'//树形父id字段名称
            ,treeShowName:'auditName'//以树形式显示的字段
            ,heightRemove:[".dHead",10]//不计算的高度,表格设定的是固定高度，此项不生效
            ,height:'80%'
            ,isFilter:false
            ,iconOpen:false//是否显示图标【默认显示】
            ,isOpenDefault:false//节点默认是展开还是折叠【默认展开】
            ,loading:true
            ,method:'post'
            ,isPage:false
            ,cols: [ [
                // {type:'radio'}
                {field:'auditName', width:800, title: '名称',event:"click"}
                ,{field:'code',width:680, title: '代码'}
                ,{width:240,title: '操作', align:'center'/*toolbar: '#barDemo'*/
                    ,templet: function(d){
                        var html='';
                        var addBtn='<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="add">添加</a>';
                        var editBtn='<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">编辑</a>';
                        var delBtn='<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>';
                        var fenpeiBtn='<a class="layui-btn layui-btn-xs" lay-event="fenpei">分配管辖机构</a>';
                        return addBtn+editBtn+delBtn+fenpeiBtn;
                    }
                }
            ] ]
            ,parseData:function (res) {//数据加载后回调
                return res;
            }
            // ,onRadio:function (obj) {//单选事件
            //     console.log(obj,"单选");
            //     msg("单选,按F12，在控制台查看详细参数！");
            // }
            // ,onClickRow:function (index, o) {
            // console.log(index,o,"双击");
            //     $.post("/getDeptData?auditId="+o.id,function (data) {
            //         v.depts=data;
            //     })
            // msg("双击！,按F12，在控制台查看详细参数！");
            // }
        });

        treeGrid.on('tool('+tableId+')',function (obj) {
            if(obj.event === 'del'){//删除行
                del(obj);
            }else if(obj.event==="add"){//添加行
                jigou_add('添加机构','shenjijigou-add','770','300',obj.data.id)
            }else if(obj.event==="edit"){//添加行
                jigou_edit('编辑机构','shenjijigou-edit','770','300',obj.data.id)
            }else if (obj.event==="click"){
                $.post("/getDeptData?auditId="+obj.data.id,function (data) {
                    v.depts=data;
                })
            }
        });
    });

    function del(obj) {
        layer.confirm("你确定删除数据吗？如果存在下级机构则一并删除，此操作不能撤销！", {icon: 3, title:'提示'},
            function(index){//确定回调
                var params = obj.data.id;
                $.post("/delShenjijigou?id="+params,function (data) {
                    layer.close(index);
                    if (data.status == 200) {
                        parent.layer.msg("已删除",{icon:1,time:2000});
                        reload()
                    }
                })
            },function (index) {//取消回调
                layer.close(index);
            }
        );
    }

    function jigou_add(title,url,w,h,content){
        layer.open({
            type: 2,
            title: title,
            shadeClose: false,
            shade: [0.3],
            maxmin: true, //开启最大化最小化按钮
            area: ['900px', '40%'],
            scrollbar: false, //屏蔽滚动条
            content: url+"?content="+content,
            end:function () {
                // reload();
            }
        });
    }
    function jigou_edit(title,url,w,h,content){
        console.log(content)
        layer.open({
            type: 2,
            title: title,
            shadeClose: false,
            shade: [0.3],
            maxmin: true, //开启最大化最小化按钮
            area: ['900px', '40%'],
            scrollbar: false, //屏蔽滚动条
            content: url+"?id="+content,
            end:function () {
            }
        });
    }
    // function print() {
    //     console.log(treeGrid.cache[tableId]);
    //     msg("对象已打印，按F12，在控制台查看！");
    // }

    function msg(msg) {
        var loadIndex=layer.msg(msg, {
            time:3000
            ,offset: 'b'//顶部
            ,shade: 0
        });
    }

    // function radioStatus() {
    //     var data = treeGrid.radioStatus(tableId)
    //     layer.alert(JSON.stringify(data));
    // }

    function reload() {
        treeGrid.reload(tableId,{
            page:{
                curr:1
            }
        });

    }
    function openAll() {
        var treedata=treeGrid.getDataTreeList(tableId);
        treeGrid.treeOpenAll(tableId,!treedata[0][treeGrid.config.cols.isOpen]);
    }
</script>
<script>
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?e2af8415b6ffbaeb52de4d080cb4ba85";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>
</body>
</html>